<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="icon" href="/static/image/logo.png">
    <script src="//unpkg.com/vue@next"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <title>翼趣科技</title>
</head>
<body>
<div id="app">
    <div class="header clearfix" :style="{backgroundColor:themeColor.headerBgColor}">
        <!--        :style="{width:isUnfold?'240px':'56px'}"-->
        <div class="header-left">
            <el-image class="logo" src="/static/image/logo.png" fit="contain"></el-image>
        </div>
        <div class="header-right">
            <el-input
                    ref="headerSearchRef"
                    class="header-search"
                    :style="{width: searchWidth}"
                    v-model="searchValue"
                    placeholder="搜索"
                    prefix-icon="Search"
                    @focus="headerSearchFocus"
                    @blur="headerSearchBlur"
            ></el-input>


            <template v-for="item in headerOperationList">

                <el-button round  v-if="item.type==='button'" class="header-button">
                    {{item.value}}
                </el-button>
<!--                <span v-if="item.type==='button'" :style="{color: item.color || '#999999'}" class="header-button">{{item.value}}</span>-->
                <el-button round v-else>
                    <el-icon :size="20" :color="item.color || '#999999'" class="header-button">
                        <component :is="item.icon"/>
                    </el-icon>
                </el-button>
            </template>

            <div class="personal-head">
                <el-avatar :size="34" src="/static/image/header.jpg" class="head-image"></el-avatar>
                <div class="head-name">王大花</div>
                <el-icon :size="20">
                    <component is="ArrowDown"/>
                </el-icon>
            </div>

        </div>

    </div>

    <div class="body clearfix">
        <div class="body-left " :class="[isUnfold?'unfold-left':'shut-left']"
             :style="{color:themeColor.leftNavFontColor}" ref="leftNavRef">
            <div class="left-compress" @click="switchSideNavUnfold">
                <div class="icon-box">
                    <el-icon :size="22">
                        <Expand/>
                    </el-icon>
                    <div v-show="isUnfold" class="compress-des">列表服务</div>
                    <el-icon :size="18" v-show="isUnfold" class="compress-hint">
                        <component is="CaretRight"/>
                    </el-icon>
                </div>
            </div>
            <div class="side-nav">
                <ul>
                    <li v-for="(item,index) in sideNav" :class="{'side-activity':sideNavActivity===item.id}"
                        @click="selectNavItem(item)" v-if="isUnfold"
                        :style="{color:sideNavActivity===item.id?themeColor.leftNavActiveFontColor:'', backgroundColor:sideNavActivity===item.id?themeColor.leftNavActiveBgColor:''}">
                        <el-icon :size="22">
                            <component :is="item.icon"/>
                        </el-icon>
                        <div class="nav-title" v-show="isUnfold">
                            {{item.name}}
                        </div>
                        <div class="nav-tip" v-show="isUnfold" v-if="item.tip">
                            <el-badge :value="isNaN(item.tip)?item.tip:item.tip>99?99:item.tip"></el-badge>
                        </div>
                    </li>
                    <el-tooltip
                            effect="dark"
                            :content="item.name"
                            placement="right-end"
                            v-else
                            :show-after="500"
                            :hide-after="0"
                            v-for="(item,index) in sideNav"
                    >
                        <li :class="{'side-activity':sideNavActivity===item.id}"
                            @click="selectNavItem(item)"
                            :style="{color:sideNavActivity===item.id?themeColor.leftNavActiveFontColor:themeColor.leftNavFontColor, backgroundColor:sideNavActivity===item.id?themeColor.leftNavActiveBgColor:''}">

                            <el-badge is-dot v-if="item.tip">
                                <el-icon :size="22">
                                    <component :is="item.icon"/>
                                </el-icon>
                            </el-badge>

                            <el-icon :size="22" v-else>
                                <component :is="item.icon"/>
                            </el-icon>

                        </li>
                    </el-tooltip>

                </ul>
            </div>
        </div>
        <div class="body-right" :class="[isUnfold?'unfold-right':'shut-right']">
            <el-tabs
                    class="tab-box"
                    v-model="activeTab"
                    @tab-remove="removeTab"
            >
                <el-tab-pane
                        v-for="(item,index) in tabList"
                        :key="item.id"
                        :label="item.name"
                        :name="item.id"
                        :closable="item.closable"
                        lazy
                >
                    <template #label>
                        <el-dropdown
                                trigger="contextmenu"
                                @visible-change="(b)=>tagPopChange(index,b)"
                                ref="dropdownRef"
                        >
                            <div style="line-height: 40px; user-select: none">{{ item.name }}</div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-if="item.closable"><span @click="closePresentTab(item,index)">关闭当前标签页</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="index!==0"><span
                                            @click="closeLeftTab(item,index)">关闭左侧标签页</span></el-dropdown-item>
                                    <el-dropdown-item v-if="index!==tabList.length-1"><span
                                            @click="closeRightTab(item,index)">关闭右侧标签页</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item><span @click="closeOtherTab(item,index)">关闭其他标签页</span>
                                    </el-dropdown-item>
                                    <el-dropdown-item><span @click="closeALlTab(item,index)">关闭全部标签页</span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                    <iframe class="iframe-item" :src="item.url" referrerpolicy="unsafe-url" ref="iframeRef"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>


    <!--左边tab展开二级弹框iframe蒙板-->
    <div class="vfp-left-nav-box" :style="{left:(isUnfold?'240px':'56px')}"
         :class="[isVFPShow?isUnfold?'unfold-right':'shut-right':'vfp-hide-w']"
         v-show="isVFPShow">
    </div>
    <!--左边tab展开二级弹框-->
    <div class="vfp-left-nav" :style="{left:(isUnfold?'240px':'56px'),width:(!isVFPShow?'0px':getVFPLine*300+'px')}"
         v-click-outside="closeVFPWicket" :aaa="getVFPLine">
        <el-scrollbar>
            <div class="column-box" :style="{columns:('200px',getVFPLine)}">
                <div v-for="(item,index) in vfpList" class="vfp-item-group">
                    <div class="vfp-item-title" @click="selectVFPItem(item)">{{item.name}}</div>
                    <template v-if="item.children">
                        <div class="vfp-item" v-for="(it,i) in item.children" @click="selectVFPItem(it)">{{it.name}}</div>
                    </template>
                </div>
            </div>
        </el-scrollbar>
    </div>
    <!--iframe蒙板-->
    <div class="mask-iframe" v-if="replaceIframe" @click="mackClick" :style="{left:(isUnfold?'240px':'56px')}"
         :class="[isUnfold?'unfold-right':'shut-right']">

    </div>
    <!--iframe加载蒙板-->
    <div class="loading-mask" v-if="loading.loadingMask"
         :style="{left:(loading.type===0 || loading.type===1 ? isUnfold?'240px':'56px':0)}"
         v-loading="loading.loadingMask" :element-loading-background="loading.bgColor"
         :element-loading-text="loading.descText"
         :class="[loading.type===0 || loading.type===1 ?isUnfold?'unfold-right':'shut-right':'',loading.class]">

    </div>
</div>
<script src="/main.js" type="module"></script>
</body>
</html>
